<template>
    <div class="main">
        <div>
            <div class="title">分油箱节点状态</div>
            <div class="content">
                <zyTableS :tableData="blockage_point" :tableColumn="tableColumn1" />
            </div>
        </div>
        <div>
            <div class="title">周期参数</div>
            <div class="content">
                <zyTableS :tableData="cycle_time" :tableColumn="tableColumn2" />
            </div>
        </div>
        <div>
            <div>
                <div class="title">当前润滑参数</div>
                <el-button class="btn" type="primary" size="small" icon="el-icon-share" @click="history(0)">历史数据</el-button>
            </div>
            <div class="content">
                <zyTableS :tableData="tableData3" :tableColumn="tableColumn3" />
            </div>
        </div>
        <div>
            <div class="">
                <div class="title">手动润滑参数</div>
                <el-button class="btn" type="primary" size="small" icon="el-icon-bottom" @click="handle1">下发参数</el-button>
                <el-button class="btn" type="primary" size="small" icon="el-icon-share" @click="history(1)">历史数据</el-button>
            </div>
            <div class="content">
                <zyTableS :tableData="tableData3" :tableColumn="tableColumn4" />
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @set="edit" />
        <history ref="history" />
    </div>
</template>
<script>
import zyTableS from '@/components/common/zyTableS.vue'
import zyForm from '@/components/common/zyForm.vue'
import history from './history.vue'
import { tableColumn1, tableColumn2, tableColumn3, tableColumn4, dialog } from './config'
import { requestApi } from '@/requset/api'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            addr: null,
            tableColumn1,
            dialog: null,
            tableColumn2,
            tableColumn3,
            tableColumn4,
            tableData3: [],
            dialogForm: {
                manual_starting_box: 0,
                manual_starting_point: 0,
                manual_cutoff_box: 0,
                manual_cutoff_point: 0,
                manual_refueling_volume: 0,
                manual_mode: 0,
                automatic_mode: 0,
                reset_oiling: 0,
                manual_oiling: 0,
                oil_replenishment_1: 0,
                oil_replenishment_2: 0,
                reset_oil_replenishment: 0,
            },
        }
    },
    props: {
        cycle_time: {
            type: Object,
            default: null,
        },
        blockage_point: {
            type: Object,
            default: null,
        },
        activeIndex: {
            type: String,
            default: null,
        },
    },
    components: {
        zyTableS,
        zyForm,
        history,
    },
    methods: {
        history(flag) {
            let config = null
            if (flag == 0) {
                config = deepClone(tableColumn3)
            } else if (flag == 1) {
                config = deepClone(tableColumn4)
            }
            this.$refs.history.doOpen({ config, addr: this.addr })
        },
        getData(addr) {
            this.addr = addr
            requestApi('post', 'device/oil/mysql', { addr, page: 1, size: 1 }).then((res) => {

                if (res.data.code == 0) {
                    this.$set(this, 'tableData3', res.data.data)
                }
            })
        },
        handle1(val) {
            this.$refs.zyform.openDialog('submit')
        },
        edit(a) {

            let activeIndex = this.activeIndex
            requestApi('post', '/device/set/manpar', { value: JSON.stringify(a), key: activeIndex + '#lubrication' }).then((res) => {
                if (res.data.code == 0) {
                    this.$refs.zyform.closeDialog()
                    this.$message.success('下发成功')
                } else this.$message.info('下发失败')
            })
        },
    },
    created() {
        this.dialog = dialog
        this.tableColumn4[0].buttons = [
            {
                text: '下发参数',
                click: (val) => this.handle1(val),
                icon: 'el-icon-bottom',
            },
            {
                text: '删除',
                click: (val) => this.handle2(val),
                icon: 'el-icon-delete',
            },
        ]
    },
}
</script>

<style scoped lang="less">
.main {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    position: relative;
    > div {
        background-color: rgba(19, 39, 76, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        .btn {
            top: bottom;
            margin: 20px 0 0 20px;
            float: left;
        }
    }

    .title {
        margin: 20px 0 0 0;
        padding-left: 20px;
        color: #11b7a4;
        font-size: 18px;
        font-weight: 500;
        border-left: 5px solid #11b7a4;
        float: left;
    }
    .content {
        flex: 1;
        padding: 20px;
    }
}
</style>
